<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=0.7">
	<title>咨询列表</title>
	<link rel="stylesheet" href="{{URL::asset('vendor/laravel-admin/font-awesome/css/font-awesome.min.css')}}">
	<link rel="stylesheet" href="{{URL::asset('vendor/laravel-admin/AdminLTE/bootstrap/css/bootstrap.min.css')}}?t={{time()}}">
	<link rel="stylesheet" href="{{URL::asset('vendor/element-ui/lib/theme-chalk/index.css')}}">
	<link rel="stylesheet" href="{{URL::asset('vendor/element-ui/lib/theme-chalk/reset.style.css')}}">
	<link rel="stylesheet" href="{{URL::asset('css/consultation/list.css')}}?v=1">
	<link rel="stylesheet" href="{{URL::asset('css/consultation/st.css')}}">
	<script src="{{URL::asset('js/jquery.min.js')}}"></script>
	<script src="{{URL::asset('vendor/laravel-admin/AdminLTE/bootstrap/js/bootstrap.min.js')}}"></script>
	<script src="{{URL::asset('vendor/element-ui/ext/vue.js')}}"></script>
	<script src="{{URL::asset('vendor/element-ui/lib/index.js')}}"></script>
</head>
<body style="padding:30px;">
<div id="main">
	<el-card class="search-tool-box">
		<el-collapse v-model="open_tool_box">
			<el-collapse-item name="true">
				<template slot="title">
					<h4 style="text-indent:2rem;">查询工具栏</h4>
				</template>
				<el-form inline :model="seaForm" label-width="100px" class="seaForm">
					<el-form-item label="报名时间">
						<el-date-picker v-model="seaForm.enroll_at" type="date"
							placeholder="报名时间" value-format="yyyy-MM-dd" size="small">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="最新登记时间">
						<el-date-picker v-model="seaForm.ask_at" type="date"
							placeholder="最新登记时间" value-format="yyyy-MM-dd" size="small">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="回访时间">
						<el-date-picker v-model="seaForm.revisit_at" type="date"
							placeholder="回访时间" value-format="yyyy-MM-dd" size="small">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="阶段">
						<el-select v-model="seaForm.step" filterable size="small" clearable placeholder="阶段">
							<el-option label="初始" value="初始"></el-option>
							<el-option label="试听" value="试听"></el-option>
							<el-option label="报名" value="报名"></el-option>
							<el-option label="二报" value="二报"></el-option>
							<el-option label="新班家长会" value="新班家长会"></el-option>
							<el-option label="开班" value="开班"></el-option>
						</el-select>
					</el-form-item>
					<!-- <el-form-item label="咨询类型">
						<el-select v-model="seaForm.list_type" filterable size="small" clearable placeholder="咨询类型">
							<el-option label="电话咨询" value="1"></el-option>
							<el-option label="预约试听" value="2"></el-option>
							<el-option label="试听记录" value="3"></el-option>
							<el-option label="报名" value="4"></el-option>
							<el-option label="二报通知" value="5"></el-option>
							<el-option label="二报记录" value="6"></el-option>
							<el-option label="开班学员分配" value="7"></el-option>
							<el-option label="新班家长会通知" value="8"></el-option>
							<el-option label="新班家长会记录" value="9"></el-option>
							<el-option label="其他" value="10"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="状态">
						<el-select v-model="seaForm.status" filterable size="small" clearable placeholder="状态">
							<el-option label="无" value="1"></el-option>
							<el-option label="待回访" value="2"></el-option>
							<el-option label="待记录" value="3"></el-option>
							<el-option label="待预约" value="4"></el-option>
							<el-option label="待通知" value="5"></el-option>
							<el-option label="待处理" value="6"></el-option>
							<el-option label="已回访" value="7"></el-option>
							<el-option label="已记录" value="8"></el-option>
							<el-option label="已预约" value="9"></el-option>
							<el-option label="已通知" value="10"></el-option>
							<el-option label="已处理" value="11"></el-option>
						</el-select>
					</el-form-item> -->
					<el-form-item label="登记人">
						<el-select v-model="seaForm.admin_name" size="small" filterable clearable placeholder="登记人">
							@foreach($Admins as $a)
							<el-option label="{{$a->en_name}}——{{$a->ch_name}}" value="{{$a->username}}"></el-option>
							@endforeach
						</el-select>
					</el-form-item>
					<el-form-item label="学生姓名">
						<el-input v-model="seaForm.st_name" placeholder="学生姓名" size="small"></el-input>
					</el-form-item>
					<el-form-item label="联系方式">
						<el-input v-model="seaForm.phone" placeholder="联系方式" size="small"></el-input>
					</el-form-item>
					<el-form-item label="家长姓名">
						<el-input v-model="seaForm.parent_name" placeholder="家长姓名" size="small"></el-input>
					</el-form-item>
					<el-form-item label=" ">
						<el-button type="primary" @click="doSearch"
							icon="el-icon-search" size="small" plain>
							查询
						</el-button>
					</el-form-item>
				</el-form>
			</el-collapse-item>
		</el-collapse>
	</el-card><hr>
	<el-card class="table-box">
		<div slot="header" class="el-card-header" align="right">
			<div class="btn-group">
				<el-button-group>
					<button type="button" class="el-button el-button--primary el-button--small is-plain " data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
						<i class="el-icon-download"></i>导出 <span class="caret"></span>
					</button>
					<ul class="dropdown-menu">
						<li @click="dataExport('curpage')">导出本页</li>
						<li @click="dataExport('selected')">导出选中</li>
						<li @click="dataExport('all')">导出全部</li>
					</ul>
					<el-button plain size="small" icon="el-icon-refresh"@click="getData" type="info">刷新</el-button>
					@if($Req['type'] == 7 && $Req['status'] == 6)
					<el-button plain size="small" icon="el-icon-service" type="warning" @click="distribute">
						分配
					</el-button>
					@endif
				</el-button-group>
			</div>
		</div>
		<div class="el-card-body">
			<el-table :data="table.data" border @sort-change="reSort"
				v-loading.fullscreen.lock="table.loading" @selection-change="handleSelectionChange">
				<el-table-column align="center" prop="list_id" type="selection" width="35">
				</el-table-column>
				<el-table-column align="center" prop="list_id" label="序号" width="75" sortable>
				</el-table-column>
			  	<el-table-column align="center" prop="st_name" label="学生姓名">
			  	</el-table-column>
				<el-table-column align="center" prop="age" label="年龄">
				</el-table-column>
				<el-table-column align="center" prop="sex" label="性别">
				</el-table-column>
				<el-table-column align="center" prop="primary_parent_name" label="家长姓名">
				</el-table-column>
				<el-table-column align="center" prop="primary_phone" label="联系方式">
				</el-table-column>
				<el-table-column align="center" prop="list_status" label="状态">
				</el-table-column>
				<el-table-column align="center" prop="admin_name" label="登记人">
				</el-table-column>
				<el-table-column align="center" prop="enroll_at" label="报名时间" sortable>
				</el-table-column>
				<el-table-column align="center" prop="ask_at" label="咨询时间" sortable>
				</el-table-column>
				<el-table-column align="center" prop="revisit_at" label="回访日期" sortable>
				</el-table-column>
				<el-table-column align="center" prop="list_type" label="咨询类型">
				</el-table-column>
				<el-table-column align="center" prop="step" label="进度">
				</el-table-column>
				<el-table-column align="center" type="expand" label="...">
					<template slot-scope="props">
						<p align="center" style="margin:0;">
							<el-button-group>
								<el-button plain size="small" type="danger">移入蓝海</el-button>
								<el-button plain size="small" type="success">添加电话记录</el-button>
								<el-button plain size="small" type="success">添加咨询记录</el-button>
								<el-button plain size="small" type="success">添加回访记录</el-button>
								<el-button plain size="small" type="warning">通知二报</el-button>
								<el-button plain size="small" type="warning">通知新班家长会</el-button>
								<el-button plain size="small" type="warning">通知开班</el-button>
								<el-button plain size="small" type="primary">预约试听</el-button>
								<el-button plain size="small" type="primary">分配班级</el-button>
								<el-button plain size="small" type="primary">工单</el-button>
								<el-button plain size="small" type="primary">个人主页</el-button>
							</el-button-group>
						</p>
						<hr>
						<p>备注：@{{props.row.remark}}</p>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				align="right"
				@size-change="pageSizeChange"
				@current-change="curPageChange"
				:current-page="seaForm.page.pageNumber"
				:page-sizes="[10, 25, 50]"
				:page-size="seaForm.page.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="seaForm.page.total">
			</el-pagination>
		</div>
	</el-card>

	<el-dialog title="开办计划" :visible.sync="showNewClassList" width="90%" lock-scroll>
		<div class="newclass-list">
			<el-form inline :model="dialogSeaForm" label-width="55px" class="dialogSeaForm">
				<el-form-item label="开班段">
					<el-date-picker style="width:171px;"
						v-model="dialogSeaForm.year" align="right" type="year" size="mini"
						placeholder="开班年份" clearable value-format="yyyy">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="校区">
					<el-select filterable v-model="dialogSeaForm.campus" size="mini">
						<el-option v-for="opt in dialogInitData.campuses"
							:label="opt.name" :key="opt.id" :value="opt.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="班型">
					<el-select filterable v-model="dialogSeaForm.class_type" size="mini">
						<el-option v-for="opt in dialogInitData.class_type"
							:label="opt.name" :key="opt.id" :value="opt.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="班段">
					<el-select filterable v-model="dialogSeaForm.class_stage" size="mini">
						<el-option v-for="(opt,key) in dialogInitData.class_stage" :label="opt.name" :key="key" :value="opt.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="分组">
					<el-select filterable v-model="dialogSeaForm.class_group" size="mini">
						<el-option v-for="opt in dialogInitData.class_group"
							:label="opt.name" :key="opt.id" :value="opt.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="班号">
					<el-input v-model="dialogSeaForm.no" size="mini"></el-input>
				</el-form-item>
				<el-form-item label=" ">
					<el-button type="primary" @click="dialogDoSearch" size="mini"
						icon="el-icon-search" plain>
						查询
					</el-button>
				</el-form-item>
			</el-form>
			<el-table :data="dialogTable.data" border @sort-change="reSort" size="small"
				v-loading.fullscreen.lock="dialogTable.loading">
				<el-table-column align="center" prop="k" label="序号">
				</el-table-column>
				<el-table-column align="center" prop="campus_name" label="校区">
				</el-table-column>
				<el-table-column align="center" prop="type_name" label="班型">
				</el-table-column>
				<el-table-column align="center" prop="stage_name" label="班段">
				</el-table-column>
				<el-table-column align="center" prop="group_name" label="分组">
				</el-table-column>
				<el-table-column align="center" prop="no" label="班号">
				</el-table-column>
				<el-table-column align="center" prop="tutor" label="班主任">
				</el-table-column>
				<el-table-column align="center" label="年度季度">
					<template slot-scope="scope">
						@{{scope.row.year}} - @{{scope.row.season}}
					</template>
				</el-table-column>
				<el-table-column align="center" prop="batch" label="批次">
				</el-table-column>
				<el-table-column align="center" prop="total" label="计划人数" width="80">
				</el-table-column>
				<el-table-column align="center" prop="sex_rate" label="性别比例(男/女)" width="120">
				</el-table-column>
				<el-table-column align="center" prop="lvl_rate" label="等级比例(A/B/C/D)" width="140">
				</el-table-column>
				<el-table-column align="center" prop="st_count" label="人数" width="50">
				</el-table-column>
				<el-table-column align="center" label="选定">
					<template slot-scope="scope">
						<el-button type="primary" icon="el-icon-check" size="mini" plain circle @click="doDistribute(scope.row)">
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<el-pagination
			align="right"
			:current-page="dialogSeaForm.page.pageNumber"
			@current-change="dialogCurPageChange"
			:page-size="dialogSeaForm.page.pageSize"
			layout="total, prev, pager, next"
			:total="dialogSeaForm.page.total">
		</el-pagination>
	</el-dialog>
</div>
</body>
<script type="text/javascript">
let main = new Vue({
	el:"#main",
	data:{
		showNewClassList:false,
		dialogTable:{
			loading:false,
			data:[]
		},
		dialogSeaForm:{
			year:"",
			campus:"",
			class_type:"",
			class_stage:"",
			class_group:"",
			no:"",
			_token:"{{csrf_token()}}",
			sort:{
				sortBy:"id",
				orderBy:"desc",
			},
			page:{
				pageSize:10,
				pageNumber:1,
				total:0
			}
		},
		dialogInitData:{
			campuses:[],
			class_type:[],
			class_stage:[],
			class_group:[]
		},
		open_tool_box:"false",
		selected_ids:[],
		seaForm:{
			admin_name:"",
			list_type:"{{$Req['type']}}",
			enroll_at:"",
			ask_at:"",
			revisit_at:"",
			phone:"",
			st_name:"",
			parent_name:"",
			step:"",
			ask_type:"",
			status:"{{$Req['status']}}",
			_token:"{{csrf_token()}}",
			sort:{
				sortBy:"id",
				orderBy:"desc",
			},
			page:{
				pageSize:10,
				pageNumber:1,
				total:0
			}
		},
		table:{
			loading:false,
			data:[]
		}
	},
	mounted:function() {
		this.init();
	},
	methods:{
		init() {
			this.getData();
		},
		getDialogInitData() {
			let url = "{{URL::asset('admin/consultation/newclass/get_seaform_opt')}}";
			$.get(url,function(res) {
				main.dialogInitData = res.data;
			});
		},
		getDialogTableData() {
			this.dialogTable.loading = true;
			let url = "{{URL::asset('admin/consultation/newclass/get_table_data	')}}";
			let param = this.dialogSeaForm;
			$.get(url,param,function(res){
				main.dialogTable.data = res.data.rows;
				main.dialogSeaForm.page.total = res.data.total;
				main.dialogTable.loading = false;
			});
		},
		dialogCurPageChange(val) {
			this.dialogSeaForm.page.pageNumber = val;
			this.getDialogTableData();
		},
		doSearch() {
			this.open_tool_box = "false";
			this.seaForm.page.pageNumber = 1;
			this.getData();
		},
		dialogDoSearch() {
			this.dialogSeaForm.page.pageNumber = 1;
			this.getDialogTableData();
		},
		getData() {
			this.table.loading = true;
			let url = "{{URL::asset('admin/consultation/consultation_list/get_data')}}";
			let params = this.seaForm;
			$.post(url,params,function(res) {
				main.table.loading = false;
				if(res.code == 1){
					main.$message.success(res.msg);
					main.table.data = res.data.rows;
					main.seaForm.page.total = res.data.total;
				}else{
					main.$notify.error({title:"Error",message:res.msg});
				}
			})
		},
		reSort(col) {
			if(col.prop){
				this.seaForm.sort.sortBy = col.prop;
				if(col.order == "ascending"){
					this.seaForm.sort.orderBy = "asc";
				}else{
					this.seaForm.sort.orderBy = "desc";
				}
			}else{
				this.seaForm.sort.sortBy = "id";
				this.seaForm.sort.orderBy = "desc";
			}
			this.doSearch();
		},
		pageSizeChange(val) {
			this.seaForm.page.pageSize = val;
			this.seaForm.page.pageNumber = 1;
			this.getData();
		},
		curPageChange(val) {
			this.seaForm.page.pageNumber = val;
			this.getData();
		},
		dataExport(export_type) {
			let url = "{{URL::asset('admin/consultation/consultation_list/export_data')}}";
			let params = {
				_token:"{{csrf_token()}}",
				export_type:export_type,
				list_type:"{{$Req['type']}}",
				offset:0
			};
			switch (export_type) {
				case "selected":
					if(this.checkSelectedIds()){
						return false;
					}
					params.ids = this.selected_ids.join(",");
					break;
				case "curpage":
					let length = this.table.data.length;
					curPageIds = [];
					for(let i=0;i<length;i++){
						curPageIds.push(this.table.data[i].id)
					}
					params.ids = curPageIds.join(",");
					break;
			}
			this.table.loading = true;
			this.doExport(url,params);
		},
		doExport(url,params) {
			$.post(url,params,function(res) {
				if(res.code == 1){
					if(res.data.status == "done") {
						main.table.loading = false;
						window.open("{{URL::asset('excel')}}/"+res.data.fileName);
					}else{
						params.offset += 1;
						main.doExport(url,params);
					}
				}else{
					main.$notify.error({title:"Error",message:res.msg});
				}
			});
		},
		checkSelectedIds() {
			if(this.selected_ids.length < 1){
				this.$notify.error({title:"Error",message:"请至少选择一条数据进行操作"});
				return true;
			}
			return false;
		},
		handleSelectionChange(val) {
			let length = val.length;
			this.selected_ids = [];
			for(let i=0;i<length;i++){
				this.selected_ids.push(val[i].list_id)
			}
		},
		distribute() {
			if(this.checkSelectedIds()){
				return false;
			}
			this.showNewClassList = true;
			this.getDialogInitData();
			this.getDialogTableData();
		},
		doDistribute(row) {
			if(this.checkSelectedIds()){
				return false;
			}
			if(this.selected_ids.length + row.st_count > row.total){
				this.$notify.error({title:"Error",message:"分配人数大于计划人数"});
				return false;
			}
			this.dialogTable.loading = true;
			let url = "{{URL::asset('admin/consultation/newclass/distribute')}}";
			let param = {
				_token:"{{csrf_token()}}",
				ids:this.selected_ids.join(','),
				newclass_id:row.id
			}
			$.post(url,param,function(res) {
				if(res.code == 1){
					main.showNewClassList = false;
					main.$notify({type:"success",title:"Success",message:res.msg});
				}else{
					main.$notify.error({title:"Error",message:res.msg});
				}
				main.dialogTable.loading = false;
				main.getData();
			});
		}
	}
})
</script>
</html>
